<template>
  <div class="home">
    <!-- 搜索框 -->
    <form action="/">
  <van-search
    show-action
    placeholder="请输入搜索关键词"
    @focus="search"
  />
</form>
    <!-- 标签栏 -->
    <van-tabs v-model="active" @click="onClick">
      <van-tab :title="category.name" v-for="category in categories" :key="category.id"
       :to="`/home/home-cat/${category.id}`"
      ></van-tab>
    </van-tabs>
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000" class="home-swiper" :width="375" :height="180"   v-show="shoops.length === 0">
      <van-swipe-item v-for="banner in banners" :key="banner.id" >
        <img v-lazy="banner.imageUrl" :style="{width: '100%', height: '100%'}" />
      </van-swipe-item>
    </van-swipe>

    <!-- 爆款商品 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      v-show="shoops.length === 0"
    >
      <van-card
        v-for="product in products"
        :key="product.id"
        :title="product.title"
        :thumb="product.image"
        @click-thumb="jumpToDetail(product.id)"
      >
        <template #desc>
          <div class="card-desc">{{product.rankingTag}}</div>
        </template>
        <template #tags>
          <div>全天热卖 NO.{{product.dataoke.dailyRanking}}</div>
          <div>
            <span>￥{{product.price | money}}</span>
            <span>原价：{{product.originPrice | money}}</span>
          </div>
        </template>
        <template #price>
          <van-tag v-if="product.couponValue" plain type="primary" color="#f00">{{product.couponValue}}</van-tag>
        </template>
        <template #num>
          <div>
            <span>{{product.dataoke.monthSales | saleNum}}</span>
            <van-icon
              :style="{marginLeft: '12px'}"
              name="cart-o"
              color="#F00"
              size="18"
              @click="addToCart(product)"
            />
          </div>
        </template>
      </van-card>
    </van-list>
    <!-- 首页分类数据 -->
    <van-grid :gutter="10" :column-num="3">
      <van-grid-item
        v-for="shoop in shoops"
        :key="shoop.id"
        :icon="shoop.imageUrl"
        :text="shoop.title"
      />
    </van-grid>
    <!-- 分类页爆款数据 -->
    <!-- <div>
    <home-cat :lists="lists"></home-cat>
    </div>
   -->
  <div>
       <router-view />
  </div>
  </div>
</template>

<script>
import { getBanners, getBaokuan } from '@/api/home'
import { getCategories, getSubCategories } from '@/api/category'
// import HomeCat from './HomeCat.vue'

export default {
  // components: { HomeCat },
  name: 'Home',
  data() {
    return {
      active: 0, // 标签栏激活项索引
      banners: [], // 轮播图数据
      categories: [], // 分类数据
      products: [], // 爆款商品数据
      loading: false, // 当前是否正在加载列表数据
      finished: false, // 所有列表数据是否加载完毕
      nextIndex: 0, // 列表数据加载时下一页数据起始索引
      shoops: [],
      lists: [],
    }
  },
  created() {
    // 轮播图数据
    getBanners()
      .then(data => {
        // 更新数据
        this.banners = data.banners
      })
      .catch(err => console.log('异常：', err))

    // 分类数据
    getCategories()
      .then(res => {
        this.categories = res.list
      })
      .catch(err => console.log('异常：', err))
  },

  // 局部定义过滤器
  filters: {
    saleNum(val) { // 销量格式化
      if (val >= 10000) {
        val = (val / 10000).toFixed(1) + '万'
      }

      return `月销量${val}`
    },
  },
  // 方法
  methods: {
    onLoad() {
      // 加载爆款商品数据
      getBaokuan(this.nextIndex)
        .then(data => {
          // 更新数据
          this.products.push(...data.list)
          this.nextIndex = data.nextIndex

          // 更新列表中使用的变量
          this.loading = false
          this.finished = data.isEnd
        })
        .catch(err => console.log('异常：', err))
    },

    // 跳转到详情页面：编程式的导航
    jumpToDetail(id) {
      this.$router.push(`/detail?id=${id}`)
    },

    // 加入购物车
    addToCart(product) {
      console.log('add to cart', product)
      const { id, title, image, price, qunTitle } = product
      // 当前选购商品
      const curr = {
        id,
        title,
        image,
        price,
        desc: qunTitle,
        amount: 1,
      }
      // 保存到购物车数组中
      // 通过提交 mutation 来保存
      this.$store.commit('add', curr)
    },

    // 点击搜索框跳转到search界面
    search() {
      this.$router.push('/search')
    },
    // 点击标签栏加载对应分类的数据
    onClick(id, title) {
      // console.log(title)
      // 查询到点击的数据
      // console.log(this.categories[id].id)
      if (this.categories[id].id !== 1) {
        getSubCategories(this.categories[id].id)
          .then(data => {
            this.shoops = data.categories
            // this.lists = data.items.list
            // console.log(this.lists)
            this.nextIndex = data.nextIndex

            // 更新列表中使用的变量
            this.loading = false
            this.finished = data.isEnd
          })
      } else {
        this.shoops = []
        // this.onLoad()
        // this.$router.push('/')
      }
    },
  },

}
</script>

<style lang="less" scoped>
  .home-swiper {
    width: 750px;
    min-height: 360px
  }

  /* 样式穿透 */
  /deep/ .van-tabs__line {
    background-color: #000;
  }
</style>
`
